<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标进入方向</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
            transition: all .5s ease;
        }
    </style>
</head>
<body>
<div class="container">

</div>

<script>
    const container= document.querySelector('.container');

    const rect = container.getBoundingClientRect()
    const basicDeg = Math.atan2(rect.height,rect.width)

    container.addEventListener("mouseenter",(e)=>{
        const x = e.offsetX - rect.width/2
        const y = rect.height / 2 - e.offsetY
        const deg = Math.atan2(y,x)
        if(deg<basicDeg&&deg>=-basicDeg){
            container.style.transform = `rotateY(30deg)`
        }else if(deg<  -basicDeg&&deg>= -Math.PI + basicDeg){
            container.style.transform = `rotateX(30deg)`
        }else if(deg<Math.PI - basicDeg&&deg>= -Math.PI + basicDeg){
            container.style.transform = `rotateX(-30deg)`
        }else {
            container.style.transform = `rotateY(-30deg)`
        }
    })

</script>
</body>
</html>